<template>
  <!--设备档案新增-->
  <div class="fixed-footer-page">
    <!--基础信息-->
    <el-card class="box-card2vv">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <!-- 基础信息表单 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding: 20px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="code">
              <el-input v-model="form.code" placeholder="系统自动生成" disabled></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="请选择" style="width: 435px">
                <el-option v-for="item in leixing" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="制造国别" prop="manufacture">
              <el-input v-model="form.manufacture" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="出厂编号" prop="factoryNumber">
              <el-input v-model="form.factoryNumber" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="出厂日期" prop="dateofManufacture">
              <el-date-picker v-model="form.dateofManufacture" placeholder="请选择日期"
                style="width: 435px"></el-date-picker>
            </el-form-item>
            <el-form-item label="重量 (吨)" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="存放位置" prop="storageLocation">
              <el-select v-model="form.storageLocation" placeholder="请选择" style="width: 435px">
                <el-option v-for="item in cunfang" :key="item.id" :label="item.depositName"
                  :value="item.depositName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="使用部门" prop="useDepartments">
              <el-input v-model="form.useDepartments" placeholder="请输入">
                <template slot="append">
                  <el-button icon="el-icon-search"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="form.contact" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="启用日期" prop="dateofEnablement">
              <el-date-picker v-model="form.dateofEnablement" placeholder="请选择日期" style="width: 435px"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输备注"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="规格型号" prop="specifications">
              <el-input v-model="form.specifications" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="总功率 (kw)" prop="totalPower">
              <el-input v-model="form.totalPower" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设备用途" prop="equipmentUse">
              <el-select v-model="form.equipmentUse" placeholder="请选择" style="width: 435px">
                <el-option v-for="item in yongtui" :key="item.index" :label="item.dictLabel"
                  :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前状态" prop="currentStatus">
              <el-select v-model="form.currentStatus" placeholder="请选择" style="width: 435px">
                <el-option label="正常运行" value="1"></el-option>
                <el-option label="停用" value="2"></el-option>
                <el-option label="报废" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备负责人" prop="theEquipment">
              <el-input v-model="form.theEquipment" placeholder="请输入">
                <template slot="append">
                  <el-button icon="el-icon-search"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="原值" prop="originalValue">
              <el-input v-model="form.originalValue" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="安装地点" prop="installationSite">
              <el-input v-model="form.installationSite" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="content">
      <!--随附附件-->
      <el-card class="box-cardvv">
        <div slot="header" class="clearfix">
          <span>随附附件</span>
        </div>
        <el-button-group style="margin-bottom: 20px">
          <el-button type="primary" @click="addRow">添加</el-button>
          <el-button @click="removeSelectedRows">移除</el-button>
        </el-button-group>
        <el-table ref="multipleTable" :data="attachments" style="width: 100%" stripe size="small"
          :cell-style="{ padding: '0px' }" :row-style="{ height: '45px' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="numbering" label="附件编号" width="150" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.numbering" placeholder="系统自动生成" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="附件名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.model" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="附件类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" placeholder="请选择">
                <el-option v-for="item in multipleSelection" :key="item.index" :label="item.dictLabel"
                  :value="item.dictLabel"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quantity" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--子设备-->
      <el-card class="box-card5vv">
        <div slot="header" class="clearfix">
          <span>子设备</span>
        </div>
        <el-button-group style="margin-bottom: 20px">
          <el-button @click="dialogVisible = true">添加</el-button>
          <el-button @click="removeSelectedRows2">移除</el-button>
        </el-button-group>
        <el-table ref="multipleTable" size="small" :cell-style="{ padding: '0px' }" :row-style="{ height: '45px' }"
          :data="childDevices" style="width: 100%" stripe @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow2(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="numbering" label="设备编号" align="center"></el-table-column>
          <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="model" label="规格型号" align="center"></el-table-column>
          <el-table-column prop="type" label="设备类型" align="center"></el-table-column>
          <el-table-column prop="department" label="使用部门" align="center"></el-table-column>
          <el-table-column prop="location" label="存放位置" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="请输入" align="center"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--子设备选择框-->
      <el-dialog title="选择设备" :visible.sync="dialogVisible" width="60%">
        <div>
          <el-input placeholder="请输入设备编号/名称/规格型号" v-model="searchInput"
            style="width: 20%; margin-right: 10px"></el-input>
          <el-select placeholder="请选择设备类型" v-model="selectedType" style="width: 20%; margin-right: 10px">
            <el-option label="生产设备" value="生产设备"></el-option>
          </el-select>
          <el-select placeholder="请选择使用部门" v-model="selectedDepartment" style="width: 20%; margin-right: 10px">
            <el-option label="生产部门" value="生产部门"></el-option>
          </el-select>
          <el-button type="primary" @click="handleSearch2">查询</el-button>
          <el-button @click="handleReset2">重置</el-button>
        </div>

        <el-table ref="myTable" size="mini" :cell-style="{ padding: '0px' }" :row-style="{ height: '35px' }"
          :data="filteredData" style="width: 100%; margin-top: 20px" stripe @selection-change="handleSelectionChange23">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="eid" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="code" label="设备编号" width="170" align="center"></el-table-column>
          <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="specifications" label="规格型号" align="center"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
          <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
          <el-table-column prop="useDepartments" label="使用部门" align="center"></el-table-column>
          <el-table-column prop="storageLocation" label="存放位置" align="center"></el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next, sizes, total" :total="total" :page-size.sync="pageSize"
          :current-page.sync="currentPage" @size-change="handlePageChange23" @current-change="handlePageChange2"
          style="margin-top: 20px" />

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm2">确认</el-button>
        </div>
      </el-dialog>

      <!--设备图片-->
      <el-card class="box-card4vv">
        <div slot="header" class="clearfix">
          <span>设备图片</span>
        </div>
        <p>最多上传10张图片</p>
        <el-upload ref="upload" action="http://localhost:9289/maintenance/upload" list-type="picture-card"
          :auto-upload="true" :on-success="handleUploadSuccess27" :on-remove="handleRemovegg" :limit="10"
          :file-list="fileList">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible2">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-card>

      <!--关联文件-->
      <el-card class="box-card3vv">
        <div slot="header" class="clearfix">
          <span>关联文件</span>
        </div>
        <el-button-group style="margin-bottom: 20px">
          <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
            :file-list="fileList2" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
            <el-button type="primary">上传文档</el-button>
          </el-upload>
        </el-button-group>
        <el-button @click="removeSelectedRows3" style="position: relative; top: -8px; left: 10px">移除</el-button>
        <el-table :data="documents" style="width: 100%" border @selection-change="handleSelectionChange37">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
          <el-table-column prop="uploader" label="上传者"></el-table-column>
          <el-table-column prop="size" label="文档大小"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <el-footer class="footer">
      <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px">关闭</el-button>
      <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px">确认</el-button>
    </el-footer>
    <div style="height: 140px"></div>
  </div>
</template>

<script>
import {
  listType,
  selectLocation,
  selectZi,
} from "@/api/eastjet-maintenance/type/type";
import {
  InsertEquipment,
  InsertAnnex,
  listEquipment,
  listEquipment2,
  InsertSbdeice,
  listAnnex,
  listImg,
  SelectDocumentaion,
  SelectSubbDevices
} from "@/api/eastjet-maintenance/sb/sb";
export default {
  data() {
    return {
      equipment: {
        code: "equipment"
      },
      //照片上传相关
      dialogImageUrl: "",
      dialogVisible2: false,
      disabled: false,
      fileList: [],
      //选择子设备详情
      dialogVisible: false,
      multipleSelection23: [],
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      total: 20,
      //关联文件上传
      documents: [],
      fileList2: [],
      multipleSelection: [],
      //子设备
      childDevices: [],
      //附件类型
      multipleSelection: [],
      //随附附件
      attachments: [
        {
          code: "自动生成编码",
          numbering: "自动生成编号",
          name: "",
          model: "",
          type: "",
          quantity: "",
          remark: "",
        },
      ],
      //基础信息
      form: {
        code: "自动生成编码",
        usname: this.$store.state.user.name,
        name: "",
        deviceType: "",
        specifications: "",
        manufacture: "",
        manufacturer: "",
        factoryNumber: "",
        brand: "",
        dateofManufacture: "",
        totalPower: "",
        weight: "",
        equipmentUse: "",
        storageLocation: "",
        currentStatus: "",
        useDepartments: "",
        theEquipment: "",
        contact: "",
        originalValue: "",
        dateofEnablement: "",
        installationSite: "",
        remark: "",
        childDevices: [],
        attachments: [],
        documents: [],
        fileList2: [],
      },
      // 添加表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        deviceType: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        specifications: [
          { required: true, message: '请输入规格型号', trigger: 'blur' }
        ],
        manufacture: [
          { required: true, message: '请输入制造商', trigger: 'blur' }
        ],
        manufacturer: [
          { required: true, message: '请输入生产商', trigger: 'blur' }
        ],
        factoryNumber: [
          { required: true, message: '请输入出厂编号', trigger: 'blur' }
        ],
        brand: [
          { required: true, message: '请输入品牌', trigger: 'blur' }
        ],
        dateofManufacture: [
          { required: true, message: '请选择生产日期', trigger: 'change' }
        ],
        totalPower: [
          { required: true, message: '请输入总功率', trigger: 'blur' },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入重量', trigger: 'blur' },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
        ],
        equipmentUse: [
          { required: true, message: '请输入设备用途', trigger: 'blur' }
        ],
        storageLocation: [
          { required: true, message: '请选择存放地点', trigger: 'change' }
        ],
        currentStatus: [
          { required: true, message: '请选择当前状态', trigger: 'change' }
        ],
        useDepartments: [
          { required: true, message: '请选择使用部门', trigger: 'change' }
        ],
        theEquipment: [
          { required: true, message: '请选择设备负责人', trigger: 'change' }
        ],
        contact: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        originalValue: [
          { required: true, message: '请输入原值', trigger: 'blur' },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
        ],
        dateofEnablement: [
          { required: true, message: '请选择启用日期', trigger: 'change' }
        ],
        installationSite: [
          { required: true, message: '请输入安装地点', trigger: 'blur' }
        ]
      },
      yongtui: [],
      leixing: [],
      cunfang: [],
      zhi: "sb_yongtui",
      zhi2: "sb_fujian",
      gai: {
        code: ""
      },
      // 新增的属性
      selectedType: "",
      selectedDepartment: "",
      searchInput: ""
    };
  },
  created() {
    if (parseInt(this.$route.query.xiu) == 2) {
      this.gai.code = this.$route.query.code
      this.getXiu();
    }
    this.getList();
  },
  methods: {
    //修改数据显示
    getXiu() {
      listEquipment(this.eq, "", "").then((res) => {
        this.form = res.data.data.list[0];
      });
      listAnnex(this.gai).then((res) => {
        console.log("附件" + res.data.data)
        this.attachments = res.data.data;
      });
      listImg(this.gai.code).then((res) => {
        this.fileList = res.data.data;
      });
      SelectDocumentaion(this.gai.code).then((res) => {
        this.documents = res.data.data;
      });
      SelectSubbDevices(this.gai.code).then((res) => {
        this.tableData4 = res.data.data;
      });
    },
    getList() {
      listType().then((res) => {
        console.log("数据", res.data.data);
        this.leixing = res.data.data;
      });
      selectLocation("").then((res) => {
        console.log("数据存放", res.data.data);
        this.cunfang = res.data.data.list;
      });
      selectZi(this.zhi).then((res) => {
        this.yongtui = res.data.data;
      });
      selectZi(this.zhi2).then((res) => {
        this.multipleSelection = res.data.data;
      });
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    //照片上传成功时候
    handleUploadSuccess27(response, file, fileList) {
      this.fileList = fileList
      console.log("数据1", this.fileList2);
    },
    //照片删除
    handleRemovegg(file, fileList) {
      this.fileList = fileList
      console.log("数据2", this.fileList2);
    },
    //选择子设备
    handleSearch2() {
      this.currentPage = 1;
    },
    handleReset2() {
      this.searchInput = "";
      this.selectedType = "";
      this.selectedDepartment = "";
    },
    //子设备选择分页`
    handlePageChange2(page) {
      this.currentPage = page;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //子设备选择分页
    handlePageChange23(size) {
      this.pageSize = size;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //子选择器确认
    handleConfirm2() {
      if (this.childDevices.length == 0) {
        for (let i = 0; i < this.multipleSelection23.length; i++) {
          this.childDevices.push({
            index: i + 1,
            numbering: this.multipleSelection23[i].code,
            name: this.multipleSelection23[i].name,
            model: this.multipleSelection23[i].specifications,
            type: this.multipleSelection23[i].deviceType,
            department: this.multipleSelection23[i].useDepartments,
            location: this.multipleSelection23[i].storageLocation,
            state: 1,
            remark: ""
          });
        }
      } else {
        for (let i = 0; i < this.childDevices.length; i++) {
          for (let j = 0; j < this.multipleSelection23.length; j++) {
            if (this.childDevices[i].numbering == this.multipleSelection23[j].code) {
              this.multipleSelection23.splice(j, 1);
            }
          }
        }
        for (let i = 0; i < this.multipleSelection23.length; i++) {
          this.childDevices.push({
            index: i + 1,
            numbering: this.multipleSelection23[i].code,
            name: this.multipleSelection23[i].name,
            model: this.multipleSelection23[i].specifications,
            type: this.multipleSelection23[i].deviceType,
            department: this.multipleSelection23[i].useDepartments,
            location: this.multipleSelection23[i].storageLocation,
            state: 1,
            remark: ""
          });
        }
        for (let i = 0; i < this.childDevices.length; i++) {
          this.childDevices[i].index = i + 1;
        }
      }
      this.$refs.myTable.clearSelection();
      this.dialogVisible = false;
    },
    //
    //确认取消
    handleCancel() {
      this.$router.go(-1);
    },
    //子选择器选择
    handleSelectionChange23(val) {
      console.log("选择数", val);
      this.multipleSelection23 = val;
    },
    //确定添加
    handleConfirm() {
      this.$refs.upload.submit();
      this.$refs.upload2.submit();
      this.form.childDevices = this.childDevices;
      this.form.attachments = this.attachments;
      this.form.fileList2 = this.fileList;
      this.form.documents = this.documents;
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 所有验证通过，调用提交方法
          if (this.form.childDevices.length == 0) {
            this.$message.error('请选择子设备');
            return false;
          }
          if (this.form.attachments.length == 0) {
            this.$message.error('请选择一份附件');
            return false;
          }
          if (this.form.documents.length == 0) {
            this.$message.error('请选择一份关联文件');
            return false;
          }
          if (this.form.fileList2.length == 0) {
            this.$message.error('请上传一张照片');
            return false;
          }
          this.biao();
        } else {
          this.$message.error('请填写所有必填项');
          return false;
        }
      });
    },

    //表单提交数据
    biao() {
      InsertEquipment(this.form).then((res) => {
        if (parseInt(res.data.code) == 520) {
          this.$router.go(-1);
        } else {
          alert("添加失败");
        }
      });
    },
    //附件添加信息
    fujian() {
      const attachmentsObj = JSON.stringify(this.attachments);
      InsertAnnex(attachmentsObj).then((res) => {
        console.log(res.data);
      });
      this.zisb();
    },
    //子设备添加
    zisb() {
      const zi = JSON.stringify(this.childDevices);
      InsertSbdeice(zi).then((res) => {
        console.log(res.data);
      });

    },
    //关联文件上传
    //文件上传成功时候
    handleUploadSuccess2(response, file, fileList) {
      this.documents.push({
        name: file.name,
        url: file.url,
        uploadDate: new Date().toLocaleDateString('zh').replaceAll('/', '-'),
        uploader: this.$store.state.user.name,
        size: file.size + " KB",
      });
      console.log("数据2", this.documents);
    },
    removeRow3(index) {

      this.documents.splice(index, 1);
    },
    handleSelectionChange37(val) {
      this.multipleSelection = val;
    },
    removeSelectedRows3() {
      this.documents = this.documents.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    removeRow2(index) {
      this.childDevices.splice(index, 1);
    },
    handleSelectionChange2(val) {
      this.multipleSelection = val;
    },
    removeSelectedRows2() {
      this.childDevices = this.childDevices.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt10M;
    },

    //  this.$refs.upload.submit();
    //随附附件方法
    addRow() {
      this.attachments.push({
        code: "自动生成",
        numbering: "自动生成",
        name: "",
        model: "",
        type: "",
        quantity: "",
        remark: "",
      });
    },
    removeRow(index) {
      this.attachments.splice(index, 1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    removeSelectedRows() {
      this.attachments = this.attachments.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
  }
};
</script>

<style scoped>
.content {
  flex: 1;
  padding: 20px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-cardvv {
  width: 1210px;
  margin-left: 20px;
  margin-top: 20px;
}

.box-card2vv {
  width: 1207px;
  margin-left: 42px;
  margin-top: 20px;
  height: 780px;
}

.box-card3vv {
  width: 1210px;
  margin-left: 20px;
  margin-top: 20px;
}

.box-card4vv {
  width: 1210px;
  margin-left: 20px;
  margin-top: 20px;
}

.box-card5vv {
  width: 1210px;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
